<style>
.con {
  margin-top: 50px;
  /* display: flex;
    justify-content: center;
    align-items: center; */
  /* margin-top: 100px; */
  /* border: 1px solid #ccc; */
}
</style>
<template>
  <div class="con">
    <el-form
      ref="form"
      :model="proNewProcure"
      :rules="rules"
      label-width="150px"
    >
      <el-col :span="6">
        <el-form-item label="货号" prop="productNo">
          <el-input
            v-model="proTemplate.productNo"
            placeholder="请输入货号"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item
          label="产品图
                                            "
          prop="picUrl"
        >
          <image-preview
            :src="proTemplateSecondry.picUrl"
            :width="80"
            :height="80"
          />
        </el-form-item>
        <!-- //-----------新增或修改方法里上传图片 v-show="scope.row.picUrl"-->
        <!-- <el-form-item label="图片地址" prop="picUrl">
                <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
                                                                                                                    :on-exceed="handleExceed" :on-success="handlePictureSuccessPic" :before-upload="beforeAvatarUpload"
                                                                                                                                                                                        :on-preview="handlePictureCardPreview" :file-list="files">
                                                                                                                                                                                        <i class="el-icon-plus"></i>
                                                                                                                                                                                    </el-upload>
                                                                                                                        <el-dialog :visible.sync="dialogVisible">
                                                                                                                            <img width="100%" v-if="picUrl" :src="picUrl" alt="">
                                                                                                                        </el-dialog>
                                                                                                                    </el-form-item> -->
        <el-form-item label="颜色属性" prop="colorProperty">
          <el-input
            v-model="proTemplateSecondry.colorProperty"
            placeholder="请输入颜色属性"
            :disabled="true"
          />
        </el-form-item>
        <!-- <el-form-item label="尺寸" prop="proTemplateSizeList">
                <el-checkbox-group v-model="checked" @change="test">
                    <el-checkbox v-for="item in checkList" :key="item.id" :label="item.id" :disabled="true">{{
                        item.label }}
                        </el-checkbox>
                    </el-checkbox-group>

                    
                </el-form-item>
                <el-form-item label="logo图片" prop="picUrl">
                    <template #default="scope">
                        <el-popover effect="light" trigger="hover" placement="right" width="auto">
                            <template #default>
                                <img :src='pjtUrl + proTemplateSecondry.logoUrl'
                                    style="object-fit: contain;width: 300px;height: 200px;">
                                                                                        </template>
                                                                                        <template #reference>
                            <img :src='pjtUrl + proTemplateSecondry.logoUrl'
                                style="object-fit: contain;width: 100px; height: 100px" />
                        </template>
                    </el-popover>
                </template>
            </el-form-item> -->
        <!-- //-----------新增或修改方法里上传图片 -->
        <!-- <el-form-item label="logo图片" prop="logoUrl">
                <el-upload :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card" :limit="limit"
                                                                                                                    :on-exceed="handleExceed" :on-success="handlePictureSuccess" :before-upload="beforeAvatarUpload"
                                                                                                                            :on-preview="handlePictureCardPreview" :file-list="fileList">
                                                                                                                            <i class="el-icon-plus"></i>
                                                                                                                                                                                    </el-upload>
                                                                                                                                                                                    <el-dialog :visible.sync="dialogVisible">
                                                                                                                                                                                        <img width="100%" v-if="imageUrl" :src="imageUrl" alt="">
                                                                                                                                                                                    </el-dialog>
                                                                                                                                                                                </el-form-item> -->
        <!-- <el-form-item label="生产厂家代码" prop="manufacturerCode">
                                                                                <el-input v-model="proTemplate.manufacturerCode" placeholder="请输入生产厂家代码" :disabled="true" />
                                                                            </el-form-item> -->
        <el-form-item label="运营-主推款" prop="operationMainProducts">
          <el-input
            v-model="proNewRelation.operationMainProducts"
            placeholder="请输入运营-主推款"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="视觉-计划拍摄时间" prop="visionShootingPlan">
          <el-date-picker
            clearable
            v-model="proNewRelation.visionShootingPlan"
            :disabled="true"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择视觉-计划拍摄时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="设计-设计师" prop="designDesigners">
          <el-input
            v-model="proTemplate.designDesigners"
            placeholder="请输入设计-设计师"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="面料成分" prop="fabricComposition">
          <el-input
            v-model="proTemplate.fabricComposition"
            :disabled="true"
            placeholder="请输入面料成分"
            style="width: 220px"
          />
        </el-form-item>
        <el-form-item label="设计-面料功能" prop="designFabricFunction">
          <el-input
            v-model="proTemplate.designFabricFunction"
            placeholder="请输入设计-面料功能"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="设计-面料名称" prop="designFabricName">
          <el-input
            v-model="proTemplate.designFabricName"
            placeholder="请输入设计-面料名称"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item
          label="设计-特别呈现卖点"
          prop="designSpecialPresentation"
        >
          <el-input
            v-model="proTemplate.designSpecialPresentation"
            placeholder="请输入设计-特别呈现卖点"
            :disabled="true"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 12 }"
            :style="{ width: '60%' }"
          />
        </el-form-item>
        <el-form-item label="运营-主图卖点提炼" prop="operationMainSelling">
          <el-input
            v-model="proNewRelation.operationMainSelling"
            placeholder="请输入运营-主图卖点提炼"
            :disabled="true"
          />
        </el-form-item>
      </el-col>
      <el-col :span="1"> <el-form-item></el-form-item></el-col>
      <el-col :span="8">
        <!-- <el-form-item label="关键词" prop="">
                    <el-autocomplete popper-class="autocomplete" :trigger-on-focus="false" class="inline-input"
                        :fetch-suggestions="queryOptions" placeholder="请输入" :autosize="{ minRows: 4, maxRows: 12 }"
                        :style="{ width: '100%' }" :debounce="0" @select="clickSelect" v-model="xxxx"></el-autocomplete>
                </el-form-item> -->
        <!-- <el-button size="mini" plain>精细化详情页</el-button>
                    <el-button size="mini" plain>功能展示</el-button>
                    <el-button size="mini" plain>细节展示</el-button>
                    <el-button size="mini" plain>设计原理</el-button>
                    <el-button size="mini" plain>海报文案</el-button>
                    <el-button size="mini" plain>精细化主图卖点</el-button>
                    <el-button size="mini" plain>视频文案</el-button> -->

        <el-form-item label="文案-精细化详情页" prop="copywritingDetailPage">
          <el-input
            v-model="proTemplate.copywritingDetailPage"
            placeholder="请输入文案-精细化详情页"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
          />
          <el-autocomplete
            popper-class="autocomplete"
            :trigger-on-focus="false"
            class="inline-input"
            :fetch-suggestions="DetailPage"
            placeholder="请输入"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
            :debounce="0"
            @select="clickDetailPage"
            v-model="copywritingDetailPage"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="文案-功能展示" prop="copywritingFunctionDisplay">
          <el-input
            v-model="proTemplate.copywritingFunctionDisplay"
            placeholder="请输入文案-功能展示"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
          />
          <el-autocomplete
            popper-class="autocomplete"
            :trigger-on-focus="false"
            class="inline-input"
            :fetch-suggestions="FunctionDisplay"
            placeholder="请输入"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
            :debounce="0"
            @select="clickFunctionDisplay"
            v-model="copywritingFunctionDisplay"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="文案-细节展示" prop="copywritingDetailShow">
          <el-input
            v-model="proTemplate.copywritingDetailShow"
            placeholder="请输入文案-细节展示"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
          />
          <el-autocomplete
            popper-class="autocomplete"
            :trigger-on-focus="false"
            class="inline-input"
            :fetch-suggestions="DetailShow"
            placeholder="请输入"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
            :debounce="0"
            @select="clickDetailShow"
            v-model="copywritingDetailShow"
          ></el-autocomplete>
        </el-form-item>

        <el-form-item label="文案-面料名称" prop="copywritingFabricName">
          <el-input
            v-model="proTemplate.copywritingFabricName"
            placeholder="请输入文案-面料名称"
          />
        </el-form-item>
        <el-form-item label="文案-面料家族" prop="copywritingFamily">
          <el-input
            v-model="proTemplate.copywritingFamily"
            placeholder="请输入文案-面料家族"
          />
        </el-form-item>
        <el-form-item label="文案-小别名" prop="copywritingNickname">
          <el-input
            v-model="proTemplate.copywritingNickname"
            placeholder="请输入文案-小别名"
          />
        </el-form-item>
        <el-form-item label="运营-计划上架时间" prop="operationPlanTime">
          <el-date-picker
            clearable
            v-model="proNewRelation.operationPlanTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择运营-计划上架时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="运营-备注" prop="operationalRemarks">
          <el-input
            v-model="proNewRelation.operationalRemarks"
            placeholder="请输入运营-备注"
          />
        </el-form-item>
        <el-form-item label="运营-运营预览架时间" prop="operationPlanTime">
          <el-date-picker
            clearable
            v-model="proNewRelation.operationPreviewPlanTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择运营-运营预览架时间"
          >
          </el-date-picker>
        </el-form-item>

        <div class="footer" style="text-align: center">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel" style="margin-left: 30px"
            >返回上一级</el-button
          >
        </div>
      </el-col>
      <el-col :span="1"> <el-form-item></el-form-item></el-col>
      <el-col :span="8">
        <el-form-item label="文案-设计原理" prop="copywritingDesignPrinciple">
          <el-input
            v-model="proTemplate.copywritingDesignPrinciple"
            placeholder="请输入文案-设计原理"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
          />
          <el-autocomplete
            popper-class="autocomplete"
            :trigger-on-focus="false"
            class="inline-input"
            :fetch-suggestions="DesignPrinciple"
            placeholder="请输入"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
            :debounce="0"
            @select="clickDesignPrinciple"
            v-model="copywritingDesignPrinciple"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="文案-海报文案" prop="copywritingPosterCopy">
          <el-input
            v-model="proTemplate.copywritingPosterCopy"
            placeholder="请输入文案-海报文案"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
          />
          <el-autocomplete
            popper-class="autocomplete"
            :trigger-on-focus="false"
            class="inline-input"
            :fetch-suggestions="PosterCopy"
            placeholder="请输入"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
            :debounce="0"
            @select="clickPosterCopy"
            v-model="copywritingPosterCopy"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="文案-精细化主图卖点" prop="copywritingMainSelling">
          <el-input
            v-model="proTemplate.copywritingMainSelling"
            placeholder="请输入文案-精细化主图卖点"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
          />
          <el-autocomplete
            popper-class="autocomplete"
            :trigger-on-focus="false"
            class="inline-input"
            :fetch-suggestions="MainSelling"
            placeholder="请输入"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
            :debounce="0"
            @select="clickMainSelling"
            v-model="copywritingMainSelling"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="文案-视频文案" prop="copywritingVideo">
          <el-input
            v-model="proTemplate.copywritingVideo"
            placeholder="请输入文案-视频文案"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
          />
          <el-autocomplete
            popper-class="autocomplete"
            :trigger-on-focus="false"
            class="inline-input"
            :fetch-suggestions="Video"
            placeholder="请输入"
            :autosize="{ minRows: 4, maxRows: 12 }"
            :style="{ width: '100%' }"
            :debounce="0"
            @select="clickVideo"
            v-model="copywritingVideo"
          ></el-autocomplete>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>
<script>
import {
  listKeyword,
  getKeyword,
  delKeyword,
  addKeyword,
  updateKeyword,
  queryContentByKey,
} from "@/api/data/keyword";
import { listFabric, getInfoByName } from "@/api/data/Fabric";
import {
  listRelation,
  getRelation,
  delRelation,
  addRelation,
  updateRelation,
} from "@/api/product/relation";
import {
  listPurchase,
  getPurchase,
  delPurchase,
  addPurchase,
  updatePurchase,
} from "@/api/edit/purchase";
//--------导入token
import { getToken } from "@/utils/auth";
export default {
  name: "Purchase",
  data() {
    return {
      copywritingDetailPage: "",
      copywritingFunctionDisplay: "",
      copywritingDetailShow: "",
      copywritingDesignPrinciple: "",
      copywritingPosterCopy: "",
      copywritingMainSelling: "",
      copywritingVideo: "",
      //文案辅助输入
      xxxx: "",
      allInfos: [],

      //图片相对路径
      picurl: "",
      //图片地址
      picUrl: "",
      //logo相对路径
      logoUrl: "",
      pjtUrl: process.env.VUE_APP_BASE_API,
      // 图片数量限制
      limit: 1,
      //页面上存的暂时图片地址List
      files: [{ url: "" }],
      //页面上存的暂时logo图片地址List
      fileList: [{ url: "" }],
      //图片地址
      imageUrl: "",
      dialogVisible: false,
      imgUpload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/common/upload",
      },
      checked: [],
      checkList: [
        { id: 1, label: "XS" },
        { id: 2, label: "S" },
        { id: 3, label: "M" },
        { id: 4, label: "L" },
        { id: 5, label: "XL" },
        { id: 6, label: "XXL" },
        { id: 7, label: "均码" },
        // { id: 0002, label: '汽车' },
        // { id: 0002, label: '火车' },
      ],
      // pjtUrl: process.env.VUE_APP_BASE_API,
      proTemplateSecondry: {}, //二级
      proTemplate: {}, //一级
      // 表单参数
      form: {
        // proNewProcure:
      },
      proNewRelation: {},
      proNewProcure: {},
      // 表单校验
      rules: {},
    };
  },

  created() {
    // this.getList();
    this.handleUpdate();
  },
  methods: {
    //响应提示
    async Video(queryString, cb) {
      console.log("queryString:", queryString);
      let options = [];
      //查询后端相关数据
      await queryContentByKey({
        rolename: "copywriting",
        keyword: this.copywritingVideo,
      }).then((res) => {
        //赋值
        this.allInfos = res.data;
      });
      console.log(JSON.stringify(this.allInfos));
      // return
      //将结果中的gsmc提取出来
      // for (let i = 0; i < this.allInfos.length; i++) {
      //     //添加进options提示信息 注意 options的格式只能是 [...{"values":"xxx"}],如果不是这样的话，响应的result不能显示在页面上
      //     options.push({ "value": this.allInfos[i].storeCode });

      // }
      this.allInfos.forEach((item) => {
        options.push({ value: item.copywritingContent, keyword: item.keyword });
      });

      let changeQueryString = this.segmentation(queryString, [
        ",",
        "，",
        "。",
        "\n",
      ]);

      //过滤结果
      const results = changeQueryString
        ? options.filter(this.filterOptions(changeQueryString))
        : options;
      // 遍历数组，对每一项添加msg，其值为点击后应该呈现在输入框的值
      if (queryString != null) {
        results.map((item, index) => {
          results[index].msg =
            item.value !== changeQueryString
              ? queryString.slice(
                  0,
                  queryString.lastIndexOf(changeQueryString)
                ) + item.value
              : queryString;
          // results[index].msg = item.keyword !== changeQueryString ? queryString.slice(0, queryString.lastIndexOf(changeQueryString)) + item.keyword : queryString
        });
      }

      //回调结果
      cb(results);
    },
    // 返回一个过滤方法
    filterOptions(queryString) {
      return (state) => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
        //     state.keyword.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        // );
        return state.value.toLowerCase().match(queryString.toLowerCase()) ||
          state.keyword.toLowerCase().match(queryString.toLowerCase())
          ? true
          : false;
      };
    },
    segmentation(queryString, arr) {
      if (queryString != null) {
        arr.map((item) => {
          queryString = queryString.slice(queryString.lastIndexOf(item) + 1);
        });
      }

      return queryString;
    },
    //点击方法
    clickVideo(msg) {
      console.log("msg", msg);
      if (this.proTemplate.copywritingVideo == null) {
        this.proTemplate.copywritingVideo = msg.msg;
      } else {
        this.proTemplate.copywritingVideo =
          this.proTemplate.copywritingVideo + msg.msg;
      }

      this.copywritingVideo = "";
    },
    //响应提示
    async MainSelling(queryString, cb) {
      console.log("queryString:", queryString);
      let options = [];
      //查询后端相关数据
      await queryContentByKey({
        rolename: "copywriting",
        keyword: this.copywritingMainSelling,
      }).then((res) => {
        //赋值
        this.allInfos = res.data;
      });
      console.log(JSON.stringify(this.allInfos));
      // return
      //将结果中的gsmc提取出来
      // for (let i = 0; i < this.allInfos.length; i++) {
      //     //添加进options提示信息 注意 options的格式只能是 [...{"values":"xxx"}],如果不是这样的话，响应的result不能显示在页面上
      //     options.push({ "value": this.allInfos[i].storeCode });

      // }
      this.allInfos.forEach((item) => {
        options.push({ value: item.copywritingContent, keyword: item.keyword });
      });

      let changeQueryString = this.segmentation(queryString, [
        ",",
        "，",
        "。",
        "\n",
      ]);

      //过滤结果
      const results = changeQueryString
        ? options.filter(this.filterOptions(changeQueryString))
        : options;
      // 遍历数组，对每一项添加msg，其值为点击后应该呈现在输入框的值
      if (queryString != null) {
        results.map((item, index) => {
          results[index].msg =
            item.value !== changeQueryString
              ? queryString.slice(
                  0,
                  queryString.lastIndexOf(changeQueryString)
                ) + item.value
              : queryString;
          // results[index].msg = item.keyword !== changeQueryString ? queryString.slice(0, queryString.lastIndexOf(changeQueryString)) + item.keyword : queryString
        });
      }

      //回调结果
      cb(results);
    },
    // 返回一个过滤方法
    filterOptions(queryString) {
      return (state) => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
        //     state.keyword.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        // );
        return state.value.toLowerCase().match(queryString.toLowerCase()) ||
          state.keyword.toLowerCase().match(queryString.toLowerCase())
          ? true
          : false;
      };
    },
    segmentation(queryString, arr) {
      if (queryString != null) {
        arr.map((item) => {
          queryString = queryString.slice(queryString.lastIndexOf(item) + 1);
        });
      }

      return queryString;
    },
    //点击方法
    clickMainSelling(msg) {
      console.log("msg", msg);
      if (this.proTemplate.copywritingMainSelling == null) {
        this.proTemplate.copywritingMainSelling = msg.msg;
      } else {
        this.proTemplate.copywritingMainSelling =
          this.proTemplate.copywritingMainSelling + msg.msg;
      }

      this.copywritingMainSelling = "";
    },
    //响应提示
    async PosterCopy(queryString, cb) {
      console.log("queryString:", queryString);
      let options = [];
      //查询后端相关数据
      await queryContentByKey({
        rolename: "copywriting",
        keyword: this.copywritingPosterCopy,
      }).then((res) => {
        //赋值
        this.allInfos = res.data;
      });
      console.log(JSON.stringify(this.allInfos));
      // return
      //将结果中的gsmc提取出来
      // for (let i = 0; i < this.allInfos.length; i++) {
      //     //添加进options提示信息 注意 options的格式只能是 [...{"values":"xxx"}],如果不是这样的话，响应的result不能显示在页面上
      //     options.push({ "value": this.allInfos[i].storeCode });

      // }
      this.allInfos.forEach((item) => {
        options.push({ value: item.copywritingContent, keyword: item.keyword });
      });

      let changeQueryString = this.segmentation(queryString, [
        ",",
        "，",
        "。",
        "\n",
      ]);

      //过滤结果
      const results = changeQueryString
        ? options.filter(this.filterOptions(changeQueryString))
        : options;
      // 遍历数组，对每一项添加msg，其值为点击后应该呈现在输入框的值
      if (queryString != null) {
        results.map((item, index) => {
          results[index].msg =
            item.value !== changeQueryString
              ? queryString.slice(
                  0,
                  queryString.lastIndexOf(changeQueryString)
                ) + item.value
              : queryString;
          // results[index].msg = item.keyword !== changeQueryString ? queryString.slice(0, queryString.lastIndexOf(changeQueryString)) + item.keyword : queryString
        });
      }

      //回调结果
      cb(results);
    },
    // 返回一个过滤方法
    filterOptions(queryString) {
      return (state) => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
        //     state.keyword.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        // );
        return state.value.toLowerCase().match(queryString.toLowerCase()) ||
          state.keyword.toLowerCase().match(queryString.toLowerCase())
          ? true
          : false;
      };
    },
    segmentation(queryString, arr) {
      if (queryString != null) {
        arr.map((item) => {
          queryString = queryString.slice(queryString.lastIndexOf(item) + 1);
        });
      }

      return queryString;
    },
    //点击方法
    clickPosterCopy(msg) {
      console.log("msg", msg);
      if (this.proTemplate.copywritingPosterCopy == null) {
        this.proTemplate.copywritingPosterCopy = msg.msg;
      } else {
        this.proTemplate.copywritingPosterCopy =
          this.proTemplate.copywritingPosterCopy + msg.msg;
      }

      this.copywritingPosterCopy = "";
    },
    //响应提示
    async DesignPrinciple(queryString, cb) {
      console.log("queryString:", queryString);
      let options = [];
      //查询后端相关数据
      await queryContentByKey({
        rolename: "copywriting",
        keyword: this.copywritingDesignPrinciple,
      }).then((res) => {
        //赋值
        this.allInfos = res.data;
      });
      console.log(JSON.stringify(this.allInfos));
      // return
      //将结果中的gsmc提取出来
      // for (let i = 0; i < this.allInfos.length; i++) {
      //     //添加进options提示信息 注意 options的格式只能是 [...{"values":"xxx"}],如果不是这样的话，响应的result不能显示在页面上
      //     options.push({ "value": this.allInfos[i].storeCode });

      // }
      this.allInfos.forEach((item) => {
        options.push({ value: item.copywritingContent, keyword: item.keyword });
      });

      let changeQueryString = this.segmentation(queryString, [
        ",",
        "，",
        "。",
        "\n",
      ]);

      //过滤结果
      const results = changeQueryString
        ? options.filter(this.filterOptions(changeQueryString))
        : options;
      // 遍历数组，对每一项添加msg，其值为点击后应该呈现在输入框的值
      if (queryString != null) {
        results.map((item, index) => {
          results[index].msg =
            item.value !== changeQueryString
              ? queryString.slice(
                  0,
                  queryString.lastIndexOf(changeQueryString)
                ) + item.value
              : queryString;
          // results[index].msg = item.keyword !== changeQueryString ? queryString.slice(0, queryString.lastIndexOf(changeQueryString)) + item.keyword : queryString
        });
      }

      //回调结果
      cb(results);
    },
    // 返回一个过滤方法
    filterOptions(queryString) {
      return (state) => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
        //     state.keyword.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        // );
        return state.value.toLowerCase().match(queryString.toLowerCase()) ||
          state.keyword.toLowerCase().match(queryString.toLowerCase())
          ? true
          : false;
      };
    },
    segmentation(queryString, arr) {
      if (queryString != null) {
        arr.map((item) => {
          queryString = queryString.slice(queryString.lastIndexOf(item) + 1);
        });
      }

      return queryString;
    },

    //点击方法
    clickDesignPrinciple(msg) {
      console.log("msg", msg);
      if (this.proTemplate.copywritingDesignPrinciple == null) {
        this.proTemplate.copywritingDesignPrinciple = msg.msg;
      } else {
        this.proTemplate.copywritingDesignPrinciple =
          this.proTemplate.copywritingDesignPrinciple + msg.msg;
      }

      this.copywritingDesignPrinciple = "";
    },
    //响应提示
    async DesignPrinciple(queryString, cb) {
      console.log("queryString:", queryString);
      let options = [];
      //查询后端相关数据
      await queryContentByKey({
        rolename: "copywriting",
        keyword: this.copywritingDesignPrinciple,
      }).then((res) => {
        //赋值
        this.allInfos = res.data;
      });
      console.log(JSON.stringify(this.allInfos));
      // return
      //将结果中的gsmc提取出来
      // for (let i = 0; i < this.allInfos.length; i++) {
      //     //添加进options提示信息 注意 options的格式只能是 [...{"values":"xxx"}],如果不是这样的话，响应的result不能显示在页面上
      //     options.push({ "value": this.allInfos[i].storeCode });

      // }
      this.allInfos.forEach((item) => {
        options.push({ value: item.copywritingContent, keyword: item.keyword });
      });

      let changeQueryString = this.segmentation(queryString, [
        ",",
        "，",
        "。",
        "\n",
      ]);

      //过滤结果
      const results = changeQueryString
        ? options.filter(this.filterOptions(changeQueryString))
        : options;
      // 遍历数组，对每一项添加msg，其值为点击后应该呈现在输入框的值
      if (queryString != null) {
        results.map((item, index) => {
          results[index].msg =
            item.value !== changeQueryString
              ? queryString.slice(
                  0,
                  queryString.lastIndexOf(changeQueryString)
                ) + item.value
              : queryString;
          // results[index].msg = item.keyword !== changeQueryString ? queryString.slice(0, queryString.lastIndexOf(changeQueryString)) + item.keyword : queryString
        });
      }

      //回调结果
      cb(results);
    },
    // 返回一个过滤方法
    filterOptions(queryString) {
      return (state) => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
        //     state.keyword.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        // );
        return state.value.toLowerCase().match(queryString.toLowerCase()) ||
          state.keyword.toLowerCase().match(queryString.toLowerCase())
          ? true
          : false;
      };
    },
    segmentation(queryString, arr) {
      if (queryString != null) {
        arr.map((item) => {
          queryString = queryString.slice(queryString.lastIndexOf(item) + 1);
        });
      }

      return queryString;
    },
    //点击方法
    clickDesignPrinciple(msg) {
      console.log("msg", msg);
      if (this.proTemplate.copywritingDesignPrinciple == null) {
        this.proTemplate.copywritingDesignPrinciple = msg.msg;
      } else {
        this.proTemplate.copywritingDesignPrinciple =
          this.proTemplate.copywritingDesignPrinciple + msg.msg;
      }

      this.copywritingDesignPrinciple = "";
    },
    //响应提示
    async DetailShow(queryString, cb) {
      console.log("queryString:", queryString);
      let options = [];
      //查询后端相关数据
      await queryContentByKey({
        rolename: "copywriting",
        keyword: this.copywritingDetailShow,
      }).then((res) => {
        //赋值
        this.allInfos = res.data;
      });
      console.log(JSON.stringify(this.allInfos));
      // return
      //将结果中的gsmc提取出来
      // for (let i = 0; i < this.allInfos.length; i++) {
      //     //添加进options提示信息 注意 options的格式只能是 [...{"values":"xxx"}],如果不是这样的话，响应的result不能显示在页面上
      //     options.push({ "value": this.allInfos[i].storeCode });

      // }
      this.allInfos.forEach((item) => {
        options.push({ value: item.copywritingContent, keyword: item.keyword });
      });

      let changeQueryString = this.segmentation(queryString, [
        ",",
        "，",
        "。",
        "\n",
      ]);

      //过滤结果
      const results = changeQueryString
        ? options.filter(this.filterOptions(changeQueryString))
        : options;
      // 遍历数组，对每一项添加msg，其值为点击后应该呈现在输入框的值
      if (queryString != null) {
        results.map((item, index) => {
          results[index].msg =
            item.value !== changeQueryString
              ? queryString.slice(
                  0,
                  queryString.lastIndexOf(changeQueryString)
                ) + item.value
              : queryString;
          // results[index].msg = item.keyword !== changeQueryString ? queryString.slice(0, queryString.lastIndexOf(changeQueryString)) + item.keyword : queryString
        });
      }

      //回调结果
      cb(results);
    },
    // 返回一个过滤方法
    filterOptions(queryString) {
      return (state) => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
        //     state.keyword.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        // );
        return state.value.toLowerCase().match(queryString.toLowerCase()) ||
          state.keyword.toLowerCase().match(queryString.toLowerCase())
          ? true
          : false;
      };
    },
    segmentation(queryString, arr) {
      if (queryString != null) {
        arr.map((item) => {
          queryString = queryString.slice(queryString.lastIndexOf(item) + 1);
        });
      }

      return queryString;
    },
    //点击方法
    clickDetailShow(msg) {
      console.log("msg", msg);
      if (this.proTemplate.copywritingDetailShow == null) {
        this.proTemplate.copywritingDetailShow = msg.msg;
      } else {
        this.proTemplate.copywritingDetailShow =
          this.proTemplate.copywritingDetailShow + msg.msg;
      }

      this.copywritingDetailShow = "";
    },
    //响应提示
    async FunctionDisplay(queryString, cb) {
      console.log("queryString:", queryString);
      let options = [];
      //查询后端相关数据
      await queryContentByKey({
        rolename: "copywriting",
        keyword: this.copywritingFunctionDisplay,
      }).then((res) => {
        //赋值
        this.allInfos = res.data;
      });
      console.log(JSON.stringify(this.allInfos));
      // return
      //将结果中的gsmc提取出来
      // for (let i = 0; i < this.allInfos.length; i++) {
      //     //添加进options提示信息 注意 options的格式只能是 [...{"values":"xxx"}],如果不是这样的话，响应的result不能显示在页面上
      //     options.push({ "value": this.allInfos[i].storeCode });

      // }
      this.allInfos.forEach((item) => {
        options.push({ value: item.copywritingContent, keyword: item.keyword });
      });

      let changeQueryString = this.segmentation(queryString, [
        ",",
        "，",
        "。",
        "\n",
      ]);

      //过滤结果
      const results = changeQueryString
        ? options.filter(this.filterOptions(changeQueryString))
        : options;
      // 遍历数组，对每一项添加msg，其值为点击后应该呈现在输入框的值
      if (queryString != null) {
        results.map((item, index) => {
          results[index].msg =
            item.value !== changeQueryString
              ? queryString.slice(
                  0,
                  queryString.lastIndexOf(changeQueryString)
                ) + item.value
              : queryString;
          // results[index].msg = item.keyword !== changeQueryString ? queryString.slice(0, queryString.lastIndexOf(changeQueryString)) + item.keyword : queryString
        });
      }

      //回调结果
      cb(results);
    },
    // 返回一个过滤方法
    filterOptions(queryString) {
      return (state) => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
        //     state.keyword.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        // );
        return state.value.toLowerCase().match(queryString.toLowerCase()) ||
          state.keyword.toLowerCase().match(queryString.toLowerCase())
          ? true
          : false;
      };
    },
    segmentation(queryString, arr) {
      if (queryString != null) {
        arr.map((item) => {
          queryString = queryString.slice(queryString.lastIndexOf(item) + 1);
        });
      }

      return queryString;
    },
    //点击方法
    clickFunctionDisplay(msg) {
      console.log("msg", msg);
      if (this.proTemplate.copywritingFunctionDisplay == null) {
        this.proTemplate.copywritingFunctionDisplay = msg.msg;
      } else {
        this.proTemplate.copywritingFunctionDisplay =
          this.proTemplate.copywritingFunctionDisplay + msg.msg;
      }

      this.copywritingFunctionDisplay = "";
    },
    //响应提示
    async DetailPage(queryString, cb) {
      console.log("queryString:", queryString);
      let options = [];
      //查询后端相关数据
      await queryContentByKey({
        rolename: "copywriting",
        keyword: this.copywritingDetailPage,
      }).then((res) => {
        //赋值
        this.allInfos = res.data;
      });
      console.log(JSON.stringify(this.allInfos));
      // return
      //将结果中的gsmc提取出来
      // for (let i = 0; i < this.allInfos.length; i++) {
      //     //添加进options提示信息 注意 options的格式只能是 [...{"values":"xxx"}],如果不是这样的话，响应的result不能显示在页面上
      //     options.push({ "value": this.allInfos[i].storeCode });

      // }
      this.allInfos.forEach((item) => {
        options.push({ value: item.copywritingContent, keyword: item.keyword });
      });

      let changeQueryString = this.segmentation(queryString, [
        ",",
        "，",
        "。",
        "\n",
      ]);

      //过滤结果
      const results = changeQueryString
        ? options.filter(this.filterOptions(changeQueryString))
        : options;
      // 遍历数组，对每一项添加msg，其值为点击后应该呈现在输入框的值
      if (queryString != null) {
        results.map((item, index) => {
          results[index].msg =
            item.value !== changeQueryString
              ? queryString.slice(
                  0,
                  queryString.lastIndexOf(changeQueryString)
                ) + item.value
              : queryString;
          // results[index].msg = item.keyword !== changeQueryString ? queryString.slice(0, queryString.lastIndexOf(changeQueryString)) + item.keyword : queryString
        });
      }

      //回调结果
      cb(results);
    },
    // 返回一个过滤方法
    filterOptions(queryString) {
      return (state) => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
        //     state.keyword.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        // );
        return state.value.toLowerCase().match(queryString.toLowerCase()) ||
          state.keyword.toLowerCase().match(queryString.toLowerCase())
          ? true
          : false;
      };
    },
    segmentation(queryString, arr) {
      if (queryString != null) {
        arr.map((item) => {
          queryString = queryString.slice(queryString.lastIndexOf(item) + 1);
        });
      }

      return queryString;
    },
    //点击方法
    clickDetailPage(msg) {
      console.log("msg", msg);
      if (this.proTemplate.copywritingDetailPage == null) {
        this.proTemplate.copywritingDetailPage = msg.msg;
      } else {
        this.proTemplate.copywritingDetailPage =
          this.proTemplate.copywritingDetailPage + msg.msg;
      }

      this.copywritingDetailPage = "";
    },

    test() {
      this.$modal.msgError("禁止修改尺寸");
    },
    /** 查询产品采购信息列表 */
    getList() {
      this.loading = true;
      listPurchase(this.queryParams).then((response) => {
        this.purchaseList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.$router.go(-1);
      return;
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.files = undefined; //加的是这一行
      this.fileList = undefined; //加的是这一行
      this.proNewProcure = {
        id: null,
        proNewId: null,
        orderNum: null,
        orderTime: null,
        fabricCycle: null,
        workshopCycle: null,
        shippingTime: null,
        fabricComposition: null,
        isDelete: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      // const id = row.id || this.ids
      const id = this.$route.query.id;
      if (!id) {
        this.$modal.msgError("请点击左侧菜单-上新管理进入");
        return;
      }
      getRelation(id).then((response) => {
        this.proNewRelation = response.data.proNewRelation;
        if (response.data.proNewProcure) {
          this.proNewProcure = response.data.proNewProcure;
        }

        //二级
        this.proTemplateSecondry = response.data.proTemplateSecondry;
        this.picurl = response.data.proTemplateSecondry.picUrl;
        this.logoUrl = response.data.proTemplateSecondry.logoUrl;
        //一级
        this.proTemplate = response.data.proTemplate;
        this.form = response.data;
        console.log(JSON.stringify(this.form));
        this.open = true;
        this.title = "修改产品采购信息";
        //图片回显
        this.files = [
          {
            url:
              process.env.VUE_APP_BASE_API +
              response.data.proTemplateSecondry.picUrl,
          },
        ]; //图片加的是这一行
        this.fileList = [
          {
            url:
              process.env.VUE_APP_BASE_API +
              response.data.proTemplateSecondry.logoUrl,
          },
        ]; //logo图片加的是这一行
        //尺寸回显

        if (
          response.data.proNewVO.proNewSizeList &&
          response.data.proNewVO.proNewSizeList.length > 0
        ) {
          let val = response.data.proNewVO.proNewSizeList.map((item) => {
            return item.size;
          });
          console.log(JSON.stringify(val));
          let m = [];
          for (let i = 0; i < val.length; i++) {
            // const element = array[i];
            this.checkList.forEach((item) => {
              if (val[i] == item.label) {
                m.push(item.id);
              }
            });
          }

          console.log(JSON.stringify(m));
          this.checked = m;
          // this.$set(this.form, 'checked', m)
        }
        // this.change(this.proTemplate.designFabricName)
      });
    },
    change(val) {
      console.log("1", val);
      // console.log(JSON.stringify(this.proTemplate.designPropertyCategory));
      getInfoByName(val).then((response) => {
        let m = [];
        m = response.data;
        console.log(JSON.stringify(m));
        this.proTemplate.copywritingFamily = response.data.copywritingFamily;
        this.proTemplate.copywritingFabricName =
          response.data.copywritingFabricName;
        // this.proTemplate.designFabricFunction = response.data.designFabricFunction
        // this.proTemplate.designSpecialPresentation = response.data.designSpecialPresentation
        // this.proTemplate.designExerciseIntensity = response.data.designExerciseIntensity
        // this.proTemplate.designFitnessLevels = response.data.designFitnessLevels
        // this.proTemplate.designSomatosensory = response.data.designSomatosensory
        // this.proTemplate.designSoftness = response.data.designSoftness
        // this.proTemplate.designFabricThickness = response.data.designFabricThickness
        // this.proTemplate.designBreathability = response.data.designBreathability
      });
    },
    /** 提交按钮 */
    submitForm() {
      // this.form.proTemplateSecondry.picUrl = this.picurl
      // this.form.proTemplateSecondry.logoUrl = this.logoUrl; // 注：重要(用于添加到数据库)，
      this.form.proNewProcure = this.proNewProcure;
      console.log(JSON.stringify(this.form));
      updateRelation(this.form).then((response) => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        console.log(JSON.stringify(response));
        this.handleUpdate();
      });
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
          } else {
            // addPurchase(this.form).then(response => {
            //     this.$modal.msgSuccess("新增成功");
            //     this.open = false;
            //     this.getList();
            // });
          }
        }
      });
    },
    //图片上传前的相关判断
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type == "image/png";
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
      }
      return isJPG && isLt2M;
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.picUrl = file.url;
      this.imageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePictureSuccessPic(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      this.picUrl = file.response.url;
      // const url = file.response.fileName;
      this.picurl = file.response.fileName;
    },
    //图片上传成功后的回调
    handlePictureSuccess(res, file) {
      //设置图片访问路径 （url 后台传过来的的上传地址）
      this.imageUrl = file.response.url;
      // const url = file.response.fileName;
      this.logoUrl = file.response.fileName;
      // console.log(JSON.stringify(url));
    },

    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传链接LOGO图片数量不能超过 ${this.limit} 个!`);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: #f5f7fa;
  border: none;
  cursor: pointer;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: #f5f7fa;
  border: none;
  width: 300px;
  resize: none;
  cursor: pointer;
}
</style>